import React, { useState, useEffect } from 'react';
import { Grid, TextField, Select, MenuItem, Button } from '@material-ui/core';
import util from '../util/index';
import echars from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';

const Sort = (props) => {
  const [value, setValue] = useState('');
  const sortTypes = ['冒泡排序', '选择排序', '插入排序', '快速排序'];
  const [sortType, setSortType] = useState(sortTypes[0]);
  const [direction, setDirection] = useState(util.sort.sortDirection.desc);
  const [echarts_react, setEchart] = useState();
  // const [records, setRecords] = useState([]);
  let sorts;

  const options = {
    grid: false,
    xAxis: {
      data: [],
      axisLine: {
        lineStyle: {
          width: 0,
        }
      },
      axisTick: {
        show: false,
      }
    },
    yAxis: {
      show: false,
    },
    series: [{
      data: [],
      type: 'bar',
    }],
  };
  useEffect(() => {
    const echart = echars.init(document.getElementById('chart'));
    echart.setOption(options);
    setEchart(echart);
  }, []);
  const handleInitClick = () => {
    let trimValue = value.trimEnd();
    trimValue = trimValue.trimStart();
    let array = trimValue.split(' ');
    array = array.filter(item => {
      return item;
    });
    // const direction = util.sort.sortDirection.desc;
    switch (sortType) {
      case sortTypes[0]:
        sorts = util.sort.bubble(array, direction);
        break;
      case sortTypes[1]:
        sorts = util.sort.select(array, direction);
        break;
      case sortTypes[2]:
        sorts = util.sort.insert(array, direction);
        break;
      case sortTypes[3]:
        sorts = util.sort.quick(array, direction);
        break;
      default:
        return;
    }
    const newOptions = { ...options };
    newOptions.xAxis.data = array;
    newOptions.series[0].data = array;
    echarts_react.setOption(newOptions);
  };
  const handleNextClick = () => {
    if (sorts) {
      const { value, done: nowDone } = sorts.next();
      if (!nowDone) {
        const [x, y, array] = value;
        const newOptions = { ...options };
        newOptions.xAxis.data = array;
        const yArray = [...array];
        yArray[x] = {
          value: yArray[x],
          itemStyle: {
            color: '#78bbf8',
          }
        };
        yArray[y] = {
          value: yArray[y],
          itemStyle: {
            color: '#78bbf8',
          }
        };
        newOptions.series[0].data = yArray;
        echarts_react.setOption(newOptions);
      }
    }
  };
  return (
    <Grid container spacing={1} justify='flex-start' alignItems='center' direction='column'>
      <Grid item alignItems='center' container lg={10}>
        <Grid item lg={9}>
          <TextField
            fullWidth
            onChange={(e) => setValue(e.target.value)}
            variant='outlined'
            value={value}>
          </TextField>
        </Grid>
        <Grid item lg={2}>
          <Button
            onClick={handleInitClick}
            variant="contained"
            color="primary">
            {'初始化'}
          </Button>
        </Grid>
      </Grid>
      <Grid item alignItems='center' container lg={10}>
        <Grid item lg={2}>
          <Select
            fullWidth
            onChange={(e) => { setSortType(e.target.value) }}
            value={sortType}>
            {
              sortTypes.map(item => {
                return (
                  <MenuItem key={item} value={item}>
                    {item}
                  </MenuItem>
                );
              })
            }
          </Select>
        </Grid>
        <Grid item lg={2}>
          <Select
            onChange={(e) => {
              setDirection(e.target.value);
            }}
            value={direction}
            fullWidth>
            <MenuItem value={util.sort.sortDirection.desc}>{'倒序'}</MenuItem>
            <MenuItem value={util.sort.sortDirection.asc}>{'正序'}</MenuItem>
          </Select>
        </Grid>
        <Grid item lg={2}>
          <Button
            onClick={handleNextClick}
            variant="contained"
            color="primary">
            {'next'}
          </Button>
        </Grid>
      </Grid>
      <Grid item
        alignItems='center'
        container lg={10}>
        <div id="chart" style={{ width: 400, height: 400 }}></div>
      </Grid>
    </Grid>
  );
};
export default Sort;